<script setup lang="ts">
// 图片链接配置数组
import PictureList from '@/components/PictureList.vue'

const imageLinks = [
  { img: '/img/SM4.png', url: 'https://example.com/link2' }, // 跳转 SM4页
  { img: '/img/AnomalousData.png', url: 'https://example.com/link3' }, // 跳转 爱国网异常数据页
  // 可继续添加更多图片...
]
</script>

<template>
  <div class="container">
    <div class="image-grid">
      <a
        v-for="(item, index) in imageLinks"
        :key="index"
        :href="item.url"
        target="_blank"
        class="image-item"
      >
        <img :src="item.img" :alt="'Image ' + (index + 1)" class="hover-zoom" />
      </a>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.image-item {
  flex: 1 1 20%; /* 每行显示5个（20% * 5 = 100%） */
  max-width: 20%;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.image-item:hover {
  transform: translateY(-5px);
}

.hover-zoom {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.hover-zoom:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-item {
    flex: 1 1 33.33%;
    max-width: 33.33%;
  }
}

@media (max-width: 480px) {
  .image-item {
    flex: 1 1 50%;
    max-width: 50%;
  }
}
</style>
